<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>三列布局</title>
        <style>
            #header{
                height:50px;
                background-color:blue;
            }
            #mainbody{
                width:1000px;height:400px;
                background-color:#ccc;
            }
            #footer{
                width:1000px;height:100px;
                background-color:red;
            }
            
            #left{
                width:200px;
                height:400px;
                background-color:deeppink;
                float:left;
            }
            #mid{
                width:200px;
                height:400px;
                background-color:greenyellow;
                float:left;
                margin:0 10px;
            }
            #right{
                width:580px;
                height:400px;
                background-color:orangered;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id='header'></div>
        <div id='mainbody'>
            <div id='left'></div>
            <div id='mid'></div>
            <div id='right'></div>
        </div>
        <div id='footer'></div>
    </body>
</html>